<template>
  <div class="px-[16px] py-[16px] mt-[8px] bg-[var(--base-color)] rounded-[8px]">
    <FormTitle title="发票信息" />
    <div class="flex mb-[8px] justify-between">
      <div>
        <span class="text">编号: {{ list?.invoice_no || "-" }}</span>
        <span class="text ml-[24px]">
          商号:
          <!-- {{ list?.business_number || "-" }} -->
          {{ info?.prediction?.offshore_consignee || "-" }}
        </span>
        <span class="text ml-[24px]">唛头: {{ list?.marking || "-" }}</span>
        <span class="text ml-[24px]"
          >TOTAI: {{ list?.total_amount_cny || "-" }}</span
        >
      </div>
      <div>
        <el-date-picker
          v-model="list.invoice_date"
          type="date"
          key="invoice_date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </div>
    </div>
    <vxe-grid v-bind="tableOptions" max-height="300px">
      <template #mark_number="{ row }">
        <el-input v-model="row.mark_number" @blur="handleEdit" />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import FormTitle from "@/components/Form/FormTitle.vue";
import { performOperation } from "@/utils/currencyHelper.js";
const props = defineProps({
  data: { type: Object, default: () => ({}) },
  info: { type: Object, default: () => {} },
  options: { type: Object, default: () => ({}) },
});

const tableOptions = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  data: [],
  columns: [
    {
      title: "标记与号码",
      width: 150,
      field: "mark_number",
      slots: { default: "mark_number" },
    },
    {
      title: "货物名称",
      minWidth: 180,
      field: "goods_name",
    },
    {
      title: "型号规格",
      width: 180,
      field: "specification",
      cellRender: { name: "arrMap" },
    },
    {
      title: "数量",
      width: 160,
      field: "goods_nums",
    },
    {
      title: "单位",
      width: 160,
      field: "goods_unit",
    },
    // {
    //   title: "价格(CNY)",
    //   width: 160,
    //   field: "goods_price_cny",
    // },
    // {
    //   title: "总金额(CNY)",
    //   width: 160,
    //   field: "goods_amount_cny",
    // },
    {
      title: "单价/总价/币制",
      minWidth: 180,
      field: "quarantine_add_code",
      slots: {
        // default:({row}) =>  `${row.goods_price||'-'}/${row.total_amount||'-'}/${row.currency||'-'}`,
        default: ({ row }) =>
          `${row.pre_price}/${row.pre_total_amount}/${row.pre_currency || "-"}`,
      },
    },
  ],
});
const list = reactive({
  invoice_no: null,
  business_number: null,
  marking: null,
  invoice_date: null,
  total_amount_cny: null,
});

watch(
  () => props.data,
  (val) => {
    if (val) {
      tableOptions.data = val?.details || [];
      Object.keys(list).forEach((key) => {
        list[key] = val[key];
      });
    }
  }
);

const getTableData = () => {
  return {
    table: tableOptions.data,
    time: list.invoice_date,
  };
};
const dataInfo = inject("currencyAndRate");
watch(
  () => dataInfo.value,
  (val) => {
    const { currency, exchange_rate = 1 } = val;
    if (!currency) return;
    let tableData = JSON.parse(JSON.stringify(tableOptions.data));
    tableData.forEach((item) => {
      const { goods_price, goods_nums } = item;
      item.pre_currency = currency;
      item.pre_price = performOperation(
        "divide",
        goods_price,
        exchange_rate
      ).value;
      item.pre_total_amount = performOperation(
        "multiply",
        item.pre_price,
        goods_nums
      ).value;
    });
    tableOptions.data = tableData;
  },
  {
    deep: true,
  }
);
defineExpose({ getTableData });
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
  color: var(--base-sub-text-color);
  line-height: 20px;
}
</style>
